<template>
  <view class="order_index">
    <header class="top">
      <text>充值记录</text>
      <view class="picker">
        <picker @change="bindPickerChange" :value="oilIndex" :range="actions" range-key="name">
          <view class="text">{{actions[oilIndex].name}}</view>
        </picker>
        <text class="icon"></text>
      </view>
      <!-- <text @click="show = true">{{ selected.name }}</text> -->

    </header>
    <view style="text-align: center;margin-top:0.5rpx" v-if="chargeList.length == 0">您暂未此类型消费记录</view>
    <section class="center">
            <template v-for="ele,index in chargeList">
      
              <!-- <nuxt-link
                class="item"
                :to="'/' + enterpriseId + '/order/details/'+ ele.orderNo"          
                tag="view"
                :key="index"
                v-if="ele.usageType =='+'"
              > -->
              <view class="item" :key="index"
                v-if="ele.usageType =='+'">
                <view class="left">
                  <text class="cont">{{ ele.usageType == "+" ? "充值":"" }} - {{ ele.payType=="wx" ? '微信':'' }}{{ ele.payType=="zfb" ? '支付宝':'' }} - {{ele.stationName}}</text>
                  <text class="time">{{ ele.createTime }}</text>
                </view>
                <view class="right add">+ {{ ele.amt }} 元</view>
                </view>
              <!-- </nuxt-link> -->
            </template>
    </section>
    <footer class="bottom" v-if="total > chargeQuery.pageSize">
      <uni-pagination :total="total" :current="chargeQuery.pageNum" :pageSize="chargeQuery.pageSize" title="标题文字"
        @change="pageChange" />
    </footer>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        total: 0,
        actions: [
          { name: "全部", value: "" },
          { name: "汽油卡",value:"1" },
          { name: "柴油卡",value:"2" },
          { name: "CNL卡",value:"3" },
          { name: "LNG卡",value:"4" },
        ],
        show: false,
        selected: {
          name: "全部",
          value: ""
        },
        chargeQuery: {
          enterpriseId: undefined,
          mobilePhone: undefined,
          stationId: undefined,
          oilName: undefined,
          pageNum: "1",
          pageSize: "10",
          usageType:"1",
        },
        chargeList: [],
        oilIndex: 0,
      }
    },
    created() {
      this.getChargeList();
    },
    
    methods: {
      pageChange(e) {
        if (e) {
          this.chargeQuery.pageNum = e.current
          this.getChargeList()
        }
      },
      bindPickerChange(e) {
        this.oilIndex = e.detail.value
        this.getChargeList();
      },
      async getChargeList() {
        try {
          this.chargeQuery.cardOilsType = this.actions[this.oilIndex].value;
          this.chargeQuery.enterpriseId = this.enterpriseId;
          this.chargeQuery.mobilePhone = this.phoneNumber;
          const amountData = await this.$Request({
            url: "/getCardRecordList",
            method: "GET",
            data: this.chargeQuery
          });
          if (amountData.retCode !== 0) {
            throw new Error(amountData.message);
          }
          console.log("amountData", amountData);

          this.chargeList = amountData.data.list;
          this.total = amountData.data.total;

          // this.chargeList = amountData.data;
        } catch (error) {
          console.log(error)
        }
      },
    }
  }
</script>

<style lang="scss">
  .order_index {
    padding: 40rpx;
    padding-bottom: 0;
    width: 100vw;
    min-height: 100vh;
    box-sizing: border-box;
    background-color: #f5f5f5;

    .top {
      background-color: #f8f8f8;
      overflow: hidden;
      padding: 20rpx 25rpx;
      display: flex;
      justify-content: space-between;
      text-align: center;
      font-size: 25rpx;
      
      .picker{
        display: flex;
        align-items: center;
        .icon {
          margin-top: 5rpx;
          margin-left: 10rpx;
          display: inline-block;
          width: 20rpx;
          height: 15rpx;
          background: url("../static/icon/1_b01_down.2x.png") no-repeat 0 0;
          background-size: 100% 100%;
        }
      }

    }

    .center {
      background-color: #ffffff;
      display: flex;
      flex-direction: column;

      >.item {
        height: 190rpx;
        padding: 30rpx 25rpx;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;

        .left {
          width: 70%;
          display: flex;
          flex-direction: column;

          .cont {
            color: #292929;
            font-size: 26rpx;
            font-weight: bold;
            height: 90rpx;
            // line-height: 90rpx;
            word-wrap: nowrap;
          }

          .time {
            color: #9f9f9f;
            font-size: 20rpx;
            height: 40rpx;
            line-height: 40rpx;
          }
        }

        .right {
          width: 25%;
          text-align: right;
          line-height: 130rpx;
          font-size: 26rpx;
          font-weight: bold;
        }

        .add {
          color: #c5ac61;
        }
      }
    }

    .bottom {
      width: 100%;
    }
  }
</style>
